import React from 'react';
import './Mask.scss';
import type { MasksProps } from '../../../type/CustomerState';


const Masks: React.FC<MasksProps> = ({
  visible,
  title = "确认操作",
  message,
  onCancel,
  onConfirm,
  cancelText = "取消",
  confirmText = "确定"
}) => {
  if (!visible) return null;

  return (
    <div className="mask-overlay">
      <div className="mask-backdrop" />

      <div className="mask-dialog">
        {title && <h3 className="mask-title">{title}</h3>}
        <p className="mask-message">{message}</p>

        {/* 按钮*/}
        <div className="mask-buttons">
          <button
            className="mask-btn cancel"
            onClick={onCancel}
          >
            {cancelText}
          </button>
          <button
            className="mask-btn confirm"
            onClick={onConfirm}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
};

export default Masks;


// 点击删除按钮，则弹出确认框，title为“删除”，message为“确定删除此重要客户喜好&禁忌吗?”，点击取消按钮则关闭确认框，点击确定按钮显示删除成功的Toast，删除成功后关闭确认框并刷新列表。